<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Flex</title>
  </head>
  <body>
    <!-- Flex and alignment -->
    <div class="bg-slate-200 flex  flex-wrap h-72 w-full items-center justify-between">
      <div class="bg-red-500 border border-blue-300 p-10">1</div>
      <div class="bg-red-500 border border-blue-300 p-10">2</div>
      <div class="bg-red-500 border border-blue-300 p-10">3</div>
      <div class="bg-red-500 border border-blue-300 p-10">4</div>

      <div class="bg-red-500 border border-blue-300 p-10">5</div>
      <div class="bg-red-500 border border-blue-300 p-10">6</div>
      <div class="bg-red-500 border border-blue-300 p-10">7</div>
      <div class="bg-red-500 border border-blue-300 p-10">8</div>
      <div class="bg-red-500 border border-blue-300 p-10">9</div>
      <div class="bg-red-500 border border-blue-300 p-10">10</div>
    </div>

    <!-- Flex Column, Gap and Order -->
     <div class="bg-slate-200 flex flex-col gap-4 flex-wrap h-72 w-full items-center justify-between">
      <div class="bg-red-500 border border-blue-300 p-10">1</div>
      <div class="bg-red-500 border border-blue-300 p-10">2</div>
      <div class="bg-red-500 border border-blue-300 p-10">3</div>
      <div class="order-1 bg-red-500 border border-blue-300 p-10">4</div> 
    </div>

    <!-- Grow and shrink -->
  </body>
</html>

<!-- Justify Content
      justify-start	      justify-content: flex-start;
      justify-end	        justify-content: flex-end;
      justify-center	    justify-content: center;
      justify-between	    justify-content: space-between;
      justify-around	    justify-content: space-around;
      justify-evenly	    justify-content: space-evenly;
    -->

<!-- 
      items-start	align-items: flex-start;
      items-end	align-items: flex-end;
      items-center	align-items: center;
      items-baseline	align-items: baseline;
      items-stretch	align-items: stretch;
     -->

<!-- Flex Direction
      flex-row	        flex-direction: row;
      flex-row-reverse	flex-direction: row-reverse;
      flex-col	        flex-direction: column;
      flex-col-reverse	flex-direction: column-reverse;
    -->

<!-- 
      flex-wrap	        flex-wrap: wrap;
      flex-wrap-reverse	flex-wrap: wrap-reverse;
      flex-nowrap	      flex-wrap: nowrap;
     -->

<!-- Flex Properties
      flex-none	    flex: none;     
      Prevent item from growing or shrinking

      flex-initial	flex: 0 1 auto; 
      Allow item to shrink but not grow, taking into account its initial size

      flex-auto	    flex: 1 1 auto; 
      Allow item to grow and shrink, taking into account its initial size

      flex-1	      flex: 1 1 0%;   
      Allow item to grow and shrink as needed, ignoring its initial size
    -->
